<template>
	<messageItem ref="messageItem" :oldMessageListLength="oldMessageListLength" :messageList='messageList'
		@handleRefreshe="handleRefreshe" @handleMobileRefuse="handleMobileRefuse" @handleMobileAgree="handleMobileAgree"
		@handleWechatRefuse="handleWechatRefuse" @handleWechatAgree="handleWechatAgree"></messageItem>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import messageItem from './messageItem.vue'
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		parseTime,
		formatTime
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				// 下拉加载页码
				MessageListPage: 1,
				// 下拉加载旧数据长度
				oldMessageListLength: 0
			}
		},
		components: {
			messageItem
		},
		computed: {
			...mapState(['imToken', 'chatId', 'messageList'])
		},
		created() {
			this.getMessageList(true)
		},
		watch: {
			messageList(val) {
				this.mapMsgTime()
				this.scrollToBottom()
			}
		},
		methods: {
			...mapMutations(['setImMessageList']),
			// 用于底部文本框获取焦点是更新消息至最底部
			updataToView() {
				this.$refs.messageItem.inputUpdataToView()
			},
			// 下拉刷新
			handleRefreshe() {
				this.MessageListPage++
				this.getMessageList(false)
			},
			// 获取聊天记录列表
			getMessageList(init) {
				http.post(api.messageList, {
					chat_id: this.chatId,
					page: this.MessageListPage,
					token: this.imToken
				}).then(res => {
					if (res.data.code == 200) {
						let {
							items
						} = res.data.data
						if (init) {
							this.setImMessageList(items)
							this.mapMsgTime()
						} else {
							if (items.length != 0) {
								this.oldMessageListLength = this.messageList.length
								var list = items.concat(this.messageList)
								this.setImMessageList(list)
								this.mapMsgTime()
							} else {
								uni.showToast({
									title: '没有更多了',
									icon: 'error'
								})
							}
							this.$refs.messageItem.updtaRefer()

						}
						this.$emit('sendReturnReceiptAll')
					}
				})
			},
			// 时间分组
			mapMsgTime() {
				var date = new Date()
				var today = date.toLocaleDateString()
				var mark = []
				// 把消息按天分组
				this.messageList.forEach(element => {
					var item_date = parseTime(element.addtime, '{y}/{m}/{d}') // 取出每个addtime的格式化日期
					if (Date.parse(item_date) == Date.parse(today)) {
						// 对比消息的时间戳和今天的时间戳，如果是相等的，放入标记（今天的每个日期都要赋值，后面要用来判断时间）
						mark.push(item_date)
						element.split_datetime = item_date
					} else {
						// 不是今天的消息，就按天分组
						if (mark.indexOf(item_date) == -1) {
							mark.push(item_date)
							element.split_datetime = item_date
						} else {
							element.split_datetime = ''
						}
					}
				})

				var last_time = 0
				// 细分处理每一天内的消息时间
				this.messageList.forEach(element => {
					// 分组日期不为空，代表需要在消息循环时显示时间
					if (element.split_datetime != '') {
						// 如果是今天，就细分，否则不处理
						if (Date.parse(element.split_datetime) == Date.parse(today)) {
							// 对比分组时间戳和今天的时间戳，是今天的消息才处理，否则不处理
							// 超过3分钟就独立标记
							var cha = (element.addtime - last_time) / 60
							if (cha > 3) {
								// 如果超过3分钟，就标记时分，否则把时间置空
								element.datetime = formatTime(element.addtime, '{h}:{i}')
							} else {
								element.datetime = ''
							}
							// 把本条消息的addtime记录下来，方便下次循环时对比
							last_time = element.addtime
						} else {
							element.datetime = element.split_datetime
						}
					}
				})
			},
			// 滚动条定位
			scrollToBottom() {
				// console.log(this.$parent,'滚动条定位')
			},
			// 交换手机号拒绝
			handleMobileRefuse(mobile) {
				this.$emit('handleMobileRefuse', mobile)
			},
			// 交换手机号同意
			handleMobileAgree(mobile) {
				this.$emit('handleMobileAgree', mobile)
			},
			// 交换微信号拒绝
			handleWechatRefuse(wechat) {
				this.$emit('handleWechatRefuse', wechat)
			},
			//交换手机号同意
			handleWechatAgree(wechat) {
				this.$emit('handleWechatAgree', wechat)
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>